<!--
 * @Author: 毕晨曦 
 * @Date: 2023-11-15 09:28:26
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-09-07 15:41:32
 * @FilePath: /wucha_wechat_miniprog/src/pages/login/index.vue
 * @Description: 登陆页面
-->
<template>
  <view class="relative" style="z-index: 1">
    <view class="px-32">
      <view class="text-32 pt-180 text-center text-grey pb-40">
        <!-- <u-input
          placeholder="请输入当前微信注册手机号"
          border="surround"
          suffixIcon="weixin-circle-fill"
          suffixIconStyle="font-size: 40rpx;"
          v-model="phone"
          type="number"
        ></u-input> -->
      </view>
      <u-button
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhoneNumber"
        type="success"
        text="手机号授权登录"
      ></u-button>
      <!-- <u-button
        @click="onGetPhoneNumber"
        type="success"
        text="手机号授权登录"
      ></u-button> -->
    </view>
  </view>
  <div
    style="
      filter: blur(100px);
      pointer-events: none;
      position: absolute;
      min-width: 100%;
      margin-top: 0px;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 0;
      opacity: 1;
    "
  >
    <div
      style="
        border-radius: 99999px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        min-width: 1000px;
        height: 100vh;
        transform: translate(-50%, -50%) scale(0.5);
        overflow: hidden;
      "
    >
      <div
        class="ColorBlobs_SpinningGradient__DpGtx"
        style="
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100vw;
          height: 100vw;
          transform: translate(-50%, -50%);
        "
      ></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as Api from "@/api/login";
import { getUserInfo } from "@/api/appNumber";
import { getPath } from "@/api/enroll";
import { shallowRef } from "vue";
import { useUserStore } from "@/store/user";
import { userStore } from "@/store/index";
const { setUser, setPhone, setCode, setPath } = useUserStore();
const user = userStore();
const phone = shallowRef("");

async function tempHanler() {
  const { data: phoneNumber } = await Api.registerTemp({ number: phone.value });

  uni.login({
    provider: "weixin",
    success: async (loginRes: { code: string }) => {
      const { data: token } = await Api.login({
        code: loginRes.code,
        phone: phoneNumber,
        useContentType: "application/x-www-form-urlencoded",
      });
      uni.setStorageSync("token", token);
      const path = await getPath();
      const userData = await getUserInfo(phoneNumber, loginRes.code);
      setUser(userData.data);
      setPhone(phoneNumber);
      setCode(loginRes.code);
      setPath(path.data);
      if (userData.code < 300) {
        uni.switchTab({ url: "/Layout/geren" });
      }
    },
  });
}

const onGetPhoneNumber = async (e: { detail: { code: string } }) => {
  uni.showLoading({ title: "登陆中" });
  const { data } = await Api.register({ code: e.detail.code });
  console.log("data", data);
  //const data = "13780684891";
  uni.login({
    provider: "weixin",
    success: async (loginRes: { code: string }) => {
      const { data: token } = await Api.login({
        code: loginRes.code,
        phone: data,
        useContentType: "application/x-www-form-urlencoded",
      });
      uni.setStorageSync("token", token);
      console.log("data---", data);
      console.log("loginRes.code---", loginRes.code);
      const userData = await getUserInfo(data, loginRes.code);
      console.log("userData", userData);
      const path = await getPath();
      setUser(userData.data);
      setPhone(data);
      setCode(loginRes.code);
      setPath(path.data);
      const res = await Api.getMember(userData.data.id);
      const resData = await Api.getAccount(res.data.aid);
      if (resData.data.memberType === "MATCHMAKER") {
        user.setIdentity(1);
      } else if (resData.data.memberType === "COACH") {
        user.setIdentity(2);
      } else {
        user.setIdentity(0);
      }
      uni.hideLoading();
      if (userData.code < 400) {
        if (!userData.data?.nickName) {
          uni.redirectTo({
            url: "/pages/enroll/one",
          });
          return;
        }
        if (!userData.data?.phone) {
          uni.redirectTo({
            url: "/pages/enroll/two",
          });
          return;
        }
        if (!userData.data?.email) {
          uni.redirectTo({
            url: "/pages/enroll/three",
          });
          return;
        }
        if (!userData.data?.province) {
          uni.redirectTo({
            url: "/pages/enroll/four",
          });
          return;
        }
        uni.switchTab({ url: "/Layout/geren" });
      }
    },
  });
};
</script>
<style scoped>
.ColorBlobs_SpinningGradient__DpGtx {
  animation: ColorBlobs_spin__CbrXa 15s linear infinite;
  background: conic-gradient(
    from 0deg,
    #08f,
    #f60,
    #bbffa1,
    #4c00ff,
    #ab2666,
    #09f
  );
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

@keyframes ColorBlobs_spin__CbrXa {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(2);
  }

  to {
    transform: translate(-50%, -50%) rotate(1turn) scale(2);
  }
}
</style>
